<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      message: '',
      form:{
        //节点ID(PSN)
        nodeID:'',
        //客户姓名
        customerName:'',
        //客户电话
        customerPhone:'',
        //运营商
        operator:'',
        //所属地区
        area:'',
        //节点分组
        nodeGroup:'',
        //装机地址
        installationAddress:'',
        //备注信息
        remark:''
      }
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    }
  },
  computed: {
    //是否禁止
    disabledStatus() {
      return !this.form.nodeID || !this.form.customerName || !this.form.customerPhone || !this.form.operator || !this.form.area;
    }
  }
};
</script>

<template>
  <frame-view class="index">
    <div style="background-color: #fff;border-radius: 20px;overflow:hidden;">

      <van-field
        v-model="form.nodeID"
        style="margin-top: 20px"
        name="节点ID(PSN)"
        label-width="8em"
        required
        label="节点ID(PSN)"
        placeholder="节点ID(PSN)"
        input-align="right"
      >
        <template #extra>
          <div style="display: flex;align-items: center;margin-left: 4px">

            &nbsp;<img src="./image/icon.png" style="width: 28px;height: 28px;" />
          </div>
        </template>
      </van-field>

      <van-field
        v-model="form.customerName"
        style="margin-top: 20px"
        name="客户姓名"
        required
        label="客户姓名"
        placeholder="客户姓名"
        input-align="right"
      >
      </van-field>

      <van-field
        v-model="form.customerPhone"
        style="margin-top: 20px"
        name="客户电话"
        label="客户电话"
        required
        placeholder="客户电话"
        input-align="right"
      >
      </van-field>

      <van-field
        v-model="form.operator"
        style="margin-top: 20px"
        name="运营商"
        label="运营商"
        placeholder="请选择"
        input-align="right"
        clickable
        required
        readonly
      >
        <template #extra>
          <div style="display: flex;align-items: center;margin-left: 4px">
            &nbsp;<van-icon name="arrow" color="#D8D8D8" />
          </div>
        </template>
      </van-field>

      <van-field
        v-model="form.area"
        style="margin-top: 20px"
        name="所属地区"
        label="所属地区"
        placeholder="请选择"
        input-align="right"
        clickable
        readonly
        required
      >
        <template #extra>
          <div style="display: flex;align-items: center;margin-left: 4px">
            &nbsp;<van-icon name="arrow" color="#D8D8D8" />
          </div>
        </template>
      </van-field>
    </div>
    <div style="background-color: #fff;border-radius: 20px;overflow:hidden;margin-top: 16px">


      <van-field
        v-model="form.nodeGroup"
        style="margin-top: 20px"
        name="节点分组"
        label="节点分组"
        placeholder="请选择"
        input-align="right"
        clickable
        readonly
      >
        <template #extra>
          <div style="display: flex;align-items: center;margin-left: 4px">
            &nbsp;<van-icon name="arrow" color="#D8D8D8" />
          </div>
        </template>
      </van-field>

      <van-field
        v-model="form.installationAddress"
        style="margin-top: 20px"
        name="装机地址"
        label="装机地址"
        placeholder="请选择"
        input-align="right"
        clickable
        readonly
      >
        <template #extra>
          <div style="display: flex;align-items: center;margin-left: 4px">
            &nbsp;<van-icon name="arrow" color="#D8D8D8" />
          </div>
        </template>
      </van-field>
      <p style="font-size: 28px;padding-left: 32px;color: #646566;margin-top: 40px">备注信息</p>
      <van-field
        class="diyTextarea"
        v-model="form.remark"
        rows="2"
        autosize
        type="textarea"
        label-align="top"
        maxlength="200"
        placeholder="请输入备注信息"
        show-word-limit
        border
      />
    </div>
    <div style="margin: 32px 16px 16px;">
      <van-button :disabled="disabledStatus" round block type="info" native-type="submit">提交</van-button>
    </div>
  </frame-view>
</template>

<style scoped lang="scss">
:deep(.van-form .van-field__control) {
  border: none;
}

:deep(.van-field__label) {
  display: flex;
  align-items: center;
}

.line {
  width: 640px;
  height: 1px;
  background-color: #b4b4b4;
  margin: auto;
}

</style>
